<template>
	<!-- 设置页面容器 -->
	<view class="setting-page">
		<!-- 设置选项列表 -->
		<view class="setting-list">
			<!-- 清除缓存选项 -->
			<view class="setting-item" @click="handleClearCache">
				<text class="item-title">清除缓存</text>
				<text class="item-value">{{ cacheSize }}</text>
			</view>
			<!-- 退出登录选项 -->
			<view class="setting-item" @click="handleLogout">
				<text class="item-title">退出登录</text>
			</view>
			<!-- 关于番茄选项 -->
			<view class="setting-item" @click="navigateToAbout">
				<text class="item-title">关于番茄</text>
			</view>
			<!-- 客服选项 -->
			<view class="setting-item" @click="contactCustomerService">
				<text class="item-title">客服</text>
			</view>
			<!-- 第三方信息共享清单选项 -->
			<view class="setting-item" @click="navigateToThirdPartyInfo">
				<text class="item-title">第三方信息共享清单</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { clearUser } from '@/stores/user';
	import { logoutAPI } from '@/services/login';

	/**
	 * 缓存大小显示值
	 */
	const cacheSize = ref('0MB');

	/**
	 * 获取缓存大小
	 * @description 从系统中获取当前应用的缓存大小
	 */
	const getCacheSize = async () => {
		// 实际项目中应该调用获取缓存大小的API
		// 这里模拟获取缓存大小
		try {
			// #ifdef APP-PLUS
			const { size } = await uni.getStorageInfoAsync();
			// 转换为MB并保留两位小数
			cacheSize.value = (size / 1024 / 1024).toFixed(2) + 'MB';
			// #endif
			// 其他平台暂不支持获取缓存大小
		} catch (error) {
			console.error('获取缓存大小失败:', error);
			cacheSize.value = '0MB';
		}
	};

	/**
	 * 清除缓存
	 * @description 清除应用的本地缓存数据
	 */
	const handleClearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					try {
						// #ifdef APP-PLUS
						uni.clearStorageSync();
						// #endif
						// 重新获取缓存大小
						getCacheSize();
						uni.showToast({
							title: '缓存清除成功',
							icon: 'success'
						});
					} catch (error) {
						console.error('清除缓存失败:', error);
						uni.showToast({
							title: '清除缓存失败',
							icon: 'error'
						});
					}
				}
			}
		});
	};

	/**
	 * 退出登录
	 * @description 弹出确认对话框，确认后执行退出登录操作
	 */
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除登录状态
					clearLoginStatus();

					uni.reLaunch({
						url: '/pages/login/index'
					});
				}
			}
		});
	};

	/**
	 * 清除登录状态
	 * @description 调用退出登录API并清除前端登录状态
	 */
	const clearLoginStatus = () => {
		// 调用退出登录接口
		logoutAPI()
			.then(() => {
				// 清除前端登录状态
				clearUser();

				uni.showToast({
					title: '退出登录成功',
					icon: 'success'
				});
			})
			.catch((error) => {
				console.error('退出登录失败:', error);
				// 即使接口失败，也清除本地状态
				clearUser();
				uni.showToast({
					title: '退出登录失败，请重新登录',
					icon: 'error'
				});
			});
	};

	/**
	 * 跳转到关于页面
	 * @description 导航到关于番茄页面
	 */
	const navigateToAbout = () => {
		uni.navigateTo({
			url: '/pages/my/about/index'
		});
	};

	/**
	 * 联系客服
	 * @description 打开客服聊天窗口或相关功能
	 */
	const contactCustomerService = () => {
		// 这里可以根据实际业务逻辑实现客服功能，例如打开客服聊天窗口
		uni.showToast({
			title: '联系客服功能待实现',
			icon: 'none'
		});
	};

	/**
	 * 跳转到第三方信息共享清单页面
	 * @description 导航到第三方信息共享清单页面
	 */
	const navigateToThirdPartyInfo = () => {
		uni.navigateTo({
			url: '/pages/my/third-party-info/index'
		});
	};

	/**
	 * 页面加载时执行
	 */
	onMounted(() => {
		getCacheSize();
	});
</script>

<style scoped lang="scss">
	// 设置页面样式
	.setting-page {
		padding: 20rpx;
		background-color: #f5f5f5;

		// 设置列表容器
		.setting-list {
			background-color: #fff;
			border-radius: 16rpx;

			// 设置项样式
			.setting-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				border-bottom: 1rpx solid #eee;

				// 最后一项去除下边框
				&:last-child {
					border-bottom: none;
				}

				// 项标题样式
				.item-title {
					font-size: 28rpx;
					color: #333;
				}

				// 项值样式
				.item-value {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
</style>